<template>
  <div class="app-container customer-page-box">
    <el-form v-show="showSearch" ref="queryForm" class="cus-search-box" :model="queryParams">
      <el-form-item label="线索ID" prop="id">
        <el-input
          v-model="queryParams.id"
          placeholder="请输入线索ID"
          clearable
          @keyup.enter.native="searchHandle"
        />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input
          v-model="queryParams.phone"
          placeholder="请输入手机号"
          clearable
          @keyup.enter.native="searchHandle"
        />
      </el-form-item>
      <el-form-item label="线索归属" prop="owner">
        <el-input
          v-model="queryParams.owner"
          placeholder="请输入线索归属"
          clearable
          @keyup.enter.native="searchHandle"
        />
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="createTime"
          clearable
          type="daterange"
          align="right"
          unlink-panels
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="线索状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择线索状态" clearable>
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="渠道来源" prop="channel">
        <el-select v-model="queryParams.channel" placeholder="请选择渠道来源" clearable>
          <el-option
            v-for="dict in channelOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="search-btn wp-50">
        <el-button class="cus-search-btn" type="primary" @click="searchHandle">搜索</el-button>
        <el-button class="cus-reset-btn" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="cus-btn-box">
      <div class="label">
        已选<span class="num">{{ ids.length }}</span>项
      </div>
      <div class="cus-btn-con">
        <el-button
          v-hasPermi="['clues:clue:add']"
          class="primary-btn"
          @click="addOrUpdateHandle()"
        >新建线索</el-button>
        <el-button
          v-hasPermi="['clues:clue:batchAdd']"
          class="default-btn"
          @click="uploadHandle()"
        >批量添加</el-button>
        <el-button
          v-hasPermi="['clues:clue:assignment']"
          class="default-btn"
          :disabled="multiple"
          @click="allotHandle()"
        >批量分配</el-button>
        <!-- <el-button
          class="default-btn"
          @click="allotHandle(1)"
        >分配测试</el-button> -->
      </div>
    </div>
    <div v-loading="dataListLoading" :class="{'loading-box':dataListLoading}">
      <div v-show="dataList && dataList.length>0">
        <el-table ref="table" class="cus-table-box" :data="dataList" stripe @selection-change="handleSelectionChange" @filter-change="childrenFilterChange" @sort-change="dataListSortChangeHandle">
          <el-table-column type="selection" width="62" align="center" />
          <el-table-column label="线索ID" align="center" prop="id" min-width="80" />
          <el-table-column label="手机号" align="center" prop="phone" min-width="100" />
          <el-table-column label="渠道来源" align="center" prop="channel" min-width="100" :formatter="channelOptionsFormat" />
          <!-- <el-table-column label="活动信息" align="center" show-overflow-tooltip min-width="120">
            <template slot-scope="scope">
              <span>[{{ scope.row.activityId }}]活动缺少字段</span>
            </template>
          </el-table-column> -->
          <el-table-column label="创建时间" align="center" min-width="140" prop="createTime" sortable>
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="归属人" align="center" prop="owner" min-width="100" />
          <!-- <el-table-column
            label="线索状态"
            align="center"
            prop="status"
            min-width="100"
            :formatter="statusFormat"
          /> -->
          <el-table-column
            label="线索状态"
            align="center"
            prop="status"
            min-width="100"
            :formatter="statusFormat"
            :filter-multiple="false"
            :filters="statusFiltersOptions"
            :filter-method="filterStatus"
            column-key="status"
            filter-placement="bottom-end"
          />
          <el-table-column label="下次跟进时间" align="center" min-width="140" prop="nextTime" sortable>
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.nextTime, '{y}-{m}-{d} {h}:{i}') }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center" min-width="120" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                v-hasPermi="['clues:clue:info']"
                size="mini"
                type="text"
                @click="followHandle(scope.row.id,'info')"
              >查看</el-button>
              <el-button
                v-if="(scope.row.status==1 || scope.row.status==2) && scope.row.owner==name"
                v-hasPermi="['clues:record:add']"
                size="mini"
                type="text"
                @click="followHandle(scope.row.id,'follow')"
              >跟进</el-button>
              <el-button
                v-if="scope.row.status==1"
                v-hasPermi="['clues:clue:assignment']"
                size="mini"
                type="text"
                @click="allotHandle(scope.row.id)"
              >分配</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="getList"
        />
      </div>
      <empty v-show="(!dataList || dataList.length<=0) && !dataListLoading" style="height: calc(100vh - 66px - 66px - 215px - 83px )" class="table-empty-box" />
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="handleQuery" />
    <!-- 弹窗, 上传文件 -->
    <upload v-if="uploadVisible" ref="upload" @refreshDataList="handleQuery" />
    <!-- 弹窗, 分配 -->
    <allot v-if="allotVisible" ref="allot" @refreshDataList="handleQuery" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import mixinViewModule from '@/mixins/view-module'
import { listClue, delClue } from '@/api/clues/clue'
import AddOrUpdate from './../operation/add-or-update-clues'
import Upload from './../operation/upload-clues'
import Allot from './../operation/allot-clues'
export default {
  name: 'Clue',
  components: {
    AddOrUpdate,
    Upload,
    Allot
  },
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getListFun: listClue,
        deleteFun: delClue,
        deleteIsBatch: true
      },
      uploadVisible: false,
      allotVisible: false,
      createTime: '',
      queryParams: {
        id: null,
        phone: null,
        owner: null,
        channel: null,
        status: null,
        params: {
          beginCreateTime: '',
          endCreateTime: ''
        }
      },
      // 渠道来源字典
      channelOptions: [],
      // 性能字典
      sexOptions: [],
      // 意向等级字典
      levelOptions: [],
      // 意向学科字典
      subjectOptions: [],
      // 状态字典
      statusOptions: [],
      statusFiltersOptions: []
    }
  },
  computed: {
    ...mapGetters(['name'])
  },
  watch: {
    createTime (val) {
      console.log(val)
      if (val && val.length >= 2) {
        this.queryParams.params.beginCreateTime = val[0]
        this.queryParams.params.endCreateTime = val[1]
      } else {
        this.queryParams.params.beginCreateTime = ''
        this.queryParams.params.endCreateTime = ''
      }
    }
  },
  created () {
    this.getDicts('sys_user_sex').then(response => {
      this.sexOptions = response.data
    })
    this.getDicts('clues_level').then(response => {
      this.levelOptions = response.data
    })
    this.getDicts('course_subject').then(response => {
      this.subjectOptions = response.data
    })
    this.getDicts('clue_status').then(response => {
      this.statusOptions = response.data
      const statusFiltersOptions = [
        {
          dictLabel: '全部',
          dictValue: ''
        }
      ]
      statusFiltersOptions.push(...response.data)
      statusFiltersOptions.forEach(item => {
        item.text = item.dictLabel
        item.value = item.dictValue
      })
      this.statusFiltersOptions = statusFiltersOptions
    })
    this.getDicts('clues_item').then(response => {
      this.channelOptions = response.data
    })
  },

  methods: {
    // 性能字典翻译
    sexFormat (row) {
      return this.selectDictLabel(this.sexOptions, row.sex)
    },
    // 意向等级字典翻译
    levelFormat (row) {
      return this.selectDictLabel(this.levelOptions, row.level)
    },
    // 意向学科字典翻译
    subjectFormat (row) {
      return this.selectDictLabel(this.subjectOptions, row.subject)
    },
    // 状态字典翻译
    statusFormat (row) {
      return this.selectDictLabel(this.statusOptions, row.status)
    },
    // 渠道来源字典翻译
    channelOptionsFormat (row) {
      return this.selectDictLabel(this.channelOptions, row.channel)
    },
    // 跟进
    followHandle (id, pageType) {
      this.$router.push({ path: '/clues/details', query: { id, pageType } })
    },
    // 分配
    allotHandle (id) {
      const ids = id ? [id] : this.ids
      console.log('ids', ids)
      if (!ids || ids.length <= 0) {
        return this.$message({
          message: '请选择至少一条数据',
          type: 'warning',
          duration: 500
        })
      }
      console.log('-=-=allotHandle-=-=-', ids)
      this.allotVisible = true
      this.$nextTick(() => {
        this.$refs.allot.form.id = ids
        this.$refs.allot.init()
      })
    },
    uploadHandle () {
      this.uploadVisible = true
      this.$nextTick(() => {
        this.$refs.upload.init()
      })
    },
    searchHandle () {
      this.setDefaultFilter(6, this.queryParams.status)
      this.handleQuery()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm('queryForm')
      this.createTime = null
      this.queryParams.params.beginCreateTime = ''
      this.queryParams.params.endCreateTime = ''
      this.$refs.table.clearFilter('status')
      this.handleQuery()
    },
    filterStatus () {
      return true
    }
  }
}
</script>
